@import (reference) 'config';
@import (reference) "../../../app/less/typography";

w-dex-trade-history {
  display: block;
  width: 100%;
  height: 100%;

  .smart-table {
    &__row {
      flex-wrap: nowrap;
      padding: 6px 14px;
      .to-dex-link {
        cursor: default;
      }
      .underline .to-dex-link {
        cursor: pointer;
      }
    }

    &__cell {
      flex-basis: calc(20% ~' - 20px');
    }

    &__cell[data-column-id="type"] {
      flex-basis: 80px;
    }

    &__cell[data-column-id="price"],
    &__cell[data-column-id="amount"],
    &__cell[data-column-id="total"],
    &__cell[data-column-id="time"],
    &__cell[data-column-id="fee"] {
      text-align: right;
    }

    &.my-trade-history {
      .smart-table {
        &__w-tbody {
          .smart-table {
            &__cell[data-column-id="type"] {
              color: @color-basic-900 !important;
            }
          }
        }
      }
    }
  }

  .decimal-muted {
    color: @color-disabled-500;
  }

  .order-side {
    &.sell {
      color: @color-error-400;
    }

    &.buy {
      color: @color-submit-400;
    }
  }

}

@media screen and (max-width: 1024px) {

  body.dex .main-content .content .dex-wrapper,
  body.dex-demo .main-content .content .dex-wrapper {
    w-dex-trade-history {
      .smart-table {
        min-width: 100%;

        &__w-thead {
          display: flex;
        }

        &__cell {
          flex-basis: 25%;

          .cell-label {
            display: none;
          }
        }

        &__row {
          flex-wrap: nowrap;
          padding: 6px 12px;
          margin: 0 2px;
          width: calc(100% ~'- 4px');
        }

        &__cell[data-column-id="pair"] {
          order: 0;
          margin-bottom: 5px;
          font-family: @font-roboto-medium;

          span {
            max-width: none;
          }
        }

        &__cell[data-column-id="type"] {
          display: none;
        }

        &__cell[data-column-id="price"] {
          text-align: left;
          order: 0;
        }

        &__cell[data-column-id="total"] {
          order: 1;
        }

        &__cell[data-column-id="amount"] {
          order: 2;
        }

        &__cell[data-column-id="time"] {
          order: 3;
          text-align: right;
          margin-right: 0;
          color: @color-basic-500;
          font-size: @font-size-caption-2;

          .cell-label {
            display: none;
          }
        }

        &__cell[data-column-id="controls"] {
          order: 4;
          position: absolute;
          flex-basis: 30px;
          right: 10px;
          min-width: 30px;
          top: 0;
          height: 30px;
          width: 30px;
          font-size: 0;
          margin-top: 5px;

          .stop {
            background-size: 10px 10px;
            background-repeat: no-repeat;
            background-position: center center;
            margin-left: 0;
            height: 30px;
            width: 30px;
          }
        }

      }

      // My trade history

      .smart-table {
        &.my-trade-history {

          .smart-table {
            min-width: 100%;

            &__w-thead {
              display: none;
            }

            &__w-tbody {
              .smart-table {
                &__row {
                  &:hover {
                    background: none transparent;
                  }
                }
              }
            }

            &__row {
              padding: 14px 12px 14px 12px;
              flex-wrap: wrap;
              margin: 0 2px;
              width: calc(100% ~'- 4px');

              &:not(:first-child) {
                &::before {
                  background: @color-basic-100;
                  height: 1px;
                  width: calc(100% ~'- 20px');
                  position: absolute;
                  top: 0;
                  left: 10px;
                  display: block;
                  content: '';
                }
              }
            }

            &__cell {
              flex-basis: calc(50% ~'- 20px');

              .cell-label {
                display: inline-block;
              }
            }

            &__cell[data-column-id="pair"] {
              order: 0;
              margin-bottom: 5px;
              font-family: @font-roboto-medium;

              span {
                max-width: none;
              }
            }

            &__cell[data-column-id="total"],
            &__cell[data-column-id="fee"],
            &__cell[data-column-id="type"] {
              display: none;
            }

            &__cell[data-column-id="price"] {
              text-align: left;
              order: 2;
            }

            &__cell[data-column-id="amount"] {
              order: 3;
            }

            &__cell[data-column-id="time"] {
              margin-bottom: 5px;
              order: 1;
              text-align: right;
              margin-right: 0;
              color: @color-basic-500;
              font-size: @font-size-caption-2;

              .cell-label {
                display: none;
              }
            }

            &__cell[data-column-id="status"] {
              display: block;
              position: absolute;
              right: 0;

              .status {
                display: none;
              }
            }

          }
        }
      }

    }
  }
}
